<template>
  <div>
    <!-- 时间/欢迎 -->
    <el-card>
      <div class="current_time">
        <div class="left">
          <strong>当前时间：</strong><span class="time_font">{{ currentTime }}</span>
          <div class="wellcome">
            <p>欢迎 {{ username }}！</p>
            <p>祝您生活幸福每一天！</p>
          </div>
          <span class="num">本站访问量:</span>
          <CountFlop :val="val"></CountFlop>
        </div>
        <div class="right">
          <div class="img">
            <img src="../../assets/img/wellcome.jpg" alt="">
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'DashBoard',
  data () {
    return {
      currentTime: '',
      interValID: '',
      username: 'oldsix',
      val: '251,2845,9357'
    }
  },
  methods: {
    /**
     * @description: 获取当前时间
     * @return {*}
     */
    getCurrentTime () {
      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
    },
    // 每隔一秒调用
    getTime () {
      this.interValID = setInterval(() => {
        this.getCurrentTime()
      }, 1000)
    }
  },
  created () {
    this.getTime()
    this.getCurrentTime()
  }
}
</script>

<style lang="less" scoped>
.current_time {
  display: flex;
  justify-content: space-between;

  .left {

    strong {
      font-weight: 500;
      font-size: 24px;
    }

    .time_font {
      font-size: 24px;
      font-weight: 700;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      color: darkslategray;
    }

    .wellcome {
      p {
        font-size: 20px;
      }
    }

    .num {
      height: 80px;
      line-height: 80px;
      position: absolute;
      left: 240px;
      // font-weight: 600;
      font-size: 18px;
    }

    .count-flop[data-v-7c11dc4e] {
      margin-left: 100px;
    }
  }

  .right {

    .img {

      img {
        margin-top: 20px;
        border-radius: 50%;
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
